.fa-anim {
  .fa-header .fa-logo {
    .transition(width);
  }

  .fa-side {  /**侧边栏打开、关闭动画**/
    .transition(width);
    .fa-nav .fa-nav-dir:hover:before,
    .fa-nav .fa-nav-item.fa-nav-itemed:before,
    .fa-nav .fa-nav-item:hover:before {    /*菜单前方色块动画*/
      .transition(height);
    }
    .fa-nav .fa-nav-dir:after { /* 菜单 折叠、打开 箭头动画 */
      .transition(all);
    }
  }

 
  .fa-main { /*侧栏打开关闭时、主体移动动画*/
    .transition(left);

    .fa-tab .fa-tab-item:before {    /* tab上方色块 */
      .transition(all);
    }
    .fa-tab .fa-tab-pan ul {
      .transition(left);
    }
  }

  .fa-ctl.layui-hide {
    display: block !important;
  }
  .fa-ctl {
    .transition(right);
  }

  .fa-footer {
    .transition(left);
  }

 
  .fa-lock-box .fa-lock-screen { /*锁屏动画*/
    animation: lock-on 0.3s ease;
    -webkit-animation: lock-on 0.3s ease;
  }
  .fa-lock-box.fa-hide .fa-lock-screen {
    animation: lock-off 0.3s ease;
    -webkit-animation: lock-off 0.3s ease;
  }
}

.transition(@o) {
  transition: @o 0.3s;
  -webkit-transition: @o 0.3s;
  -moz-transition: @o 0.3s;
  -ms-transition: @o 0.3s;
  -o-transition: @o 0.3s;
}

@keyframes lock-on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes lock-off {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
